import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../style/less/main.css';
import axios from '../api/index';
import {Button ,mountNode } from 'antd';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import actions from '../actions/index';
 import {reducer} from '../reducers/index';
 import AddToDo2 from './AddToDo2';
 import AddToDo3 from './AddToDo3';
 let store = createStore(reducer);
class App extends Component{
    constructor(props){
        super(props)
     //   this.state = store.getState();
    }
    add(){
        store.dispatch(actions.add);
       // this.setState(store.getState());
    }
    reduce(){
        store.dispatch(actions.reduce);
      //  this.setState(store.getState());
    }
    render() {
        return (
                <div>
                    {/* <h1>{this.state.text}</h1> */}
                    <h2>{this.props.text}</h2>
                    <button onClick={this.add.bind(this)}>+1</button>
                    <button onClick={this.reduce.bind(this)}>-1</button>
                    {/* <AddToDo2 add2 = {this.state.text}/> */}
                    <AddToDo3 />
                </div>
            
        );
    }
}



class AddToDo extends React.Component{
    constructor(){
        super();
    }
    
    render(){
        return(
          <div style={{marginLeft:180}}>
            <Provider store={store}>
            <App />
            </Provider>
        </div>
           )
    }
}
const mapStateToProps = (state)=>{
    return {
        text:state.text
    }
}

const mapDispatchToProps = (dispatch)=>{
    return{
        add:dispatch(actions.add),
        reduce:dispatch(actions.reduce)
    }
}



App = connect(mapStateToProps,mapDispatchToProps)(App)
export default AddToDo;